<!DOCTYPE html>
<html  menu='menubody'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-1.7.js"></script>
</head>

<style type="text/css">
	*{font-family:"微软雅黑";}
	.file{display:block;width:90px;overflow:hidden;height:112px;text-decoration:none;float:left;color:#336;border:1px solid #fff;margin-right:4px;margin-bottom: 4px;}
	.hover{background:#ecf4fd;border:1px solid #c1d1fc;box-shadow:0px 0px 5px #c1d1fc;border-radius:3px;}
	.select{background:#cdf;border:1px solid #89c;box-shadow:0px 0px 5px #c1d1fc;border-radius:3px;}

	.file .jpg,.file .png,.file .ico ,.file .gif{background: url(images/pic.png) -5px 0px no-repeat;}
	.file .ico{width:68px;height:58px;padding:5px;margin:5px;margin-bottom: 0;;border-radius:2px;background: url(images/file.png) 8px 4px no-repeat;}
	.file .folder{background: url(images/folder.png) 8px 4px no-repeat;}
	.file .html{background: url(images/html.png) 5px -2px no-repeat;}
	.file .php{background: url(images/php.png) 5px -3px no-repeat;}


	.file .title{width:85px;text-align:center;word-break:break-all;font-size:12px;margin:0 auto;padding-bottom:3px;cursor:default;}
	.file .title .fix{width:75px;height:30px;border:1px solid #333;position:relative;z-index:999;left:0;top:0px;overflow-y:hidden;font-size:12px;}	
	#info{width:98%;border-top:1px solid #ddd;clear:both;font-size:12px;color:#666;position:absolute;left:0;bottom:0px;height:200px;overflow:auto;}

	.DreamMenu { 
		position:absolute;
		padding:5px 3px 5px 2px;
		visibility:hidden; 
		z-index:100; 
		overflow:hidden; 
		width:180px;
		background-color:#f4f4f4; 
		border:#aaa 1px solid;		
		font-size:12px;

		box-shadow:3px 3px 4px #888;
		-moz-box-shadow: 3px 3px 4px #888;
		-webkit-box-shadow: 3px 3px 4px #888;
	    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=150, Color='#888888');
	} 
	.DreamMenu ul {margin:1px;border-top:#bbb 1px solid;border-bottom:2px solid #eee;} 
	.DreamMenu a {display:block;width:90%;padding:1px 2px 2px 15px;cursor:default;text-decoration:none;color:#000;line-height:1.6em;border:1px solid #f4f4f4;} 
	.DreamMenu a:hover {background:#ecf4fd;color:#224;border:1px solid #c1d1fc;border-radius:2px;} 
</style>

<body>

<?php
if (!$_GET['path']) {	
	$dir = $_SERVER['DOCUMENT_ROOT']."/";
}
else {
	$dir .=$_GET['path'].'/';
	$dir .=$_GET['thispath'].'/';
}

$dh = opendir($dir);
while (($file = readdir($dh)) !== false) {
	if ($file != "." && $file != ".." ) {
		if(is_dir($dir.$file)){
			$fileinfo='folder';
			$menu='menufolder';
		}
		else{
			$fileinfo=end(explode('.', $file));
			$menu='menufile';
		}
?>

<div class="file" menu='<?=$menu;?>'  title="<?=$file;?>">
<div class='<?=$fileinfo;?> ico' menu='<?=$menu;?>'></div>
<div  id="<?=$file;?>" class='title' menu='<?=$menu;?>' ><?=$file;?></div>
</div>
<?php
	} 
} 
closedir($dh);
?>


<!-----文件夹菜单----> 
<div id="menufolder" class='DreamMenu'> 
<a href='#'><b>打开</b></a><ul></ul> 
<a href='#' target='_blank'>浏览器中打开</a>  
<a href='#'>在新窗口中打开</a><ul></ul>
<a href='#'>复制</a> 
<a href='#'>剪切</a> 
<a href='#'>删除</a> 
<a href='#' >重命名</a> <ul></ul>
<a href='#'>zip压缩</a>
<a href='#'>zip下载</a><ul></ul>
<a href='#'>属性</a> 
</div>

<!-----文件菜单----> 
<div id="menufile" class='DreamMenu' > 
<a href='#'><b>查看</b></a> 
<a href='#'>编辑</a> 
<a href='#' target='_blank'>浏览器中打开</a> 
<a href='#'>用kindedit打开</a> 
<a href='#'>打开方式></a> <ul></ul> 
<a href='#'>复制</a> 
<a href='#'>剪切</a> 
<a href='#'>删除</a> 
<a href='#'>重命名</a> <ul></ul>
<a href='#'>zip压缩</a>
<a href='#'>zip下载</a><ul></ul>
<a href='#'>新建其他文件</a><ul></ul>
<a href='#'>属性</a> 
</div>

<!-----body----> 
<div id="menubody" class='DreamMenu'> 
<a href='javascript:history.back(-1);'><<后退</a> 
<a href='javascript:history.go(0);'>刷新</a> 
<a href='#'>查看></a> <ul></ul> 
<a href='#'>撤销粘贴</a> 
<a href='#'>粘贴</a><ul></ul> 
<a href='#'>新建文件夹</a>
<a href='#'>新建txt</a>
<a href='#'>新建其他文件</a><ul></ul>
<a href='#'>属性</a> 
</div>


<div id="info"></div>
</body>

<script>
	if(!document.all){
		document.captureEvents(Event.MOUSEDOWN);
	}
	var tmenu= 0; 
	var amenu = 0; 
	typeselect='INPUT,A,DIV,BODY,IMG,HTML';
	function menu_hidden() 
	{ 
		if(tmenu==0) return; 
		document.getElementById(tmenu).style.visibility='hidden'; 
		tmenu=0; 
	} 
	document.oncontextmenu = function (e) 
	{ 
		menu_hidden(); 
		var _Obj = document.all ? event.srcElement : e.target; 
		if(typeselect.indexOf(_Obj.tagName) == -1) return; 
		amenu = _Obj.getAttribute('menu'); 
		if(amenu == 'null') return; 
		if(document.all) e = event; 
		showmenu(amenu, e); 
		return false; 
	} 
	function showmenu(Eid, event) 
	{ 
		var menu = document.getElementById(Eid); 
		var leftpos = event.clientX + document.body.scrollLeft; 
		var toppos = event.clientY + document.body.scrollTop; 
		menu.style.left = leftpos.toString() + 'px'; 
		menu.style.top = toppos.toString() + 'px'; 
		menu.style.visibility = 'visible'; 
		tmenu= Eid; 
	}
	

	var isedit=0;//编辑状态标记
	var selectid="";//当前选中id
	function stopPP(e){//防止事件冒泡
		var evt = e || window.event;//IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法		
		evt.stopPropagation ? evt.stopPropagation():(evt.cancelBubble=true);
	}
	function info(info) //调试信息
	{
		$("#info").html($("#info").html()+info+"    ");
		var h=document.getElementById("info").scrollHeight+500;//获取div .info高度
		$("#info").animate({scrollTop:h},500);//滚动到底部	
	}	

//文件div鼠标操作-------------------------------------------------	
    $(".file").mouseenter(function () {
		$(this).addClass("hover");//hover&选中效果
		//info("hover");
		$(this).unbind('click').click(function(){//点击选中
			stopPP(arguments[0]);	
			$('.select').toggleClass("select");	
			$(this).addClass("select");
			selectid=$(this).find(".title").attr("id");//获取子元素id的值
			info("selected id="+selectid);						
		});	
		$(this).find(".ico").unbind('click').dblclick(function (){//双击图标	
			stopPP(arguments[0]);
			window.location.href="?path=<?php echo $dir;?>&thispath="+selectid;
			//info("ico-dblclick"+selectid);
		});
	
		$(".title").dblclick(function () {//重命名	
			if (selectid!="")
			{
				stopPP(arguments[0]);
				$(this).html("<textarea class='fix' onclick='stopPP(arguments[0])'>"+$(this).text()+"</textarea>");				
				$('.fix').focus(function (){//编辑框事件处理
					$(this).focus;
					//info("<br/>重命名<br/>");
				}).blur(function(){
					str=$('.fix').attr('value');//获取编辑器值
					$(this).parent().html(str);//设置父结点,用表单值替换父结点内容。
					//info("blur id="+selectid);
					//info("<br/>重命名完成<br/>");			
				});
				
			}
		});		
	}).mouseleave(function(){
		$(this).toggleClass("hover");
	});
//-------------------------------------------------	
	$("html").unbind('click').click(function () {
		if (selectid!="") //重命名状态检验
		{			
			$('.select').toggleClass("select");
			isselect="";			
		}
		menu_hidden();//隐藏右键菜单
		//info("body click");	
    });
</script>
</html>